<template>
  <div class="index">
    <div v-for="(item, key) in newsListShow">
      <news-cell :newsDate="item" :key="key" ></news-cell>
    </div>
  </div>
</template>
 
<script>
import axios from '../utils/axios';
import api from '../api/login';
// 引入列表展示的newscell.vue子组件
import newsCell from '../components/newsCell.vue';
 
export default {
  name: 'index',
  data () {
    return {
      newsListShow: [],
    }
  },
  components: {
    newsCell
  },
  created() {
    this.setNewsApi();
  },
  methods:{
    //获取新闻列表
    async setNewsApi() {
      console.log('hellowrold组件模拟Mock.js数据请求');
      let param = {
        type: 'top',
        key: '123456'
      }
      const res = await axios.post(api.news,param);
        if(res.articles){
          console.log(res.articles);
          this.newsListShow = res.articles;
        }
    },
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.topNav{
  width: 100%;
  background: #ED4040;
  position: fixed;
  top:0rem;
  left: 0;
  z-index: 10;
}
.simpleNav{
  width: 100%;
  line-height: 1rem;
  overflow: hidden;
  overflow-x: auto;
  text-align: center;
  font-size: 0;
  font-family: '微软雅黑';
  white-space: nowrap;
}
.simpleNav::-webkit-scrollbar{height:0px}
.simpleNavBar{
  display: inline-block;
  width: 1.2rem;
  color:#fff;
  font-size:0.3rem;
}
.navActive{
  color: #000;
  border-bottom: 0.05rem solid #000;
}
.placeholder{
  width:100%;
  height: 1rem;
}
</style>